<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 4000px;
        }
    </style>
</head>

<body>

    <script>

        // 降低高频率事件的触发次数

        //    onscroll   onresize   ...


        // 节流：每隔一段时间执行一次
        //     原本可能每毫秒都会执行1次，每300毫秒执行一次   --- 降低频率


        // let flag = true;

        // window.onscroll = function () {
        //     // console.log(1);
        //     if (flag) {
        //         flag = false;
        //         setTimeout(() => {
        //             console.log(1);   // 实际上要做的事情
        //             flag = true;
        //         }, 500)
        //     }
        // }



        // 封装节流函数   ---  利用闭包
        function throttle(cb, time = 300) {
            let flag = true;


            // 这才是真正的事件处理函数
            return function (e) {
                // console.log(e);
                // console.log(this);   // 事件源
                if (flag) {
                    flag = false;
                    setTimeout(() => {
                        // console.log(1);
                        cb.call(this, e);
                        flag = true;
                    }, time)
                }
            }

        }



        window.onscroll = throttle(function (e) {    // throttle这个函数其实  是立即就调用了   然后得到了一个函数
            console.log(e);
        })


        document.onclick = throttle(function () {
            console.log(this);   // window
        })



        // window.onscroll = f()

        // function f() {
        //     console.log(999);
        //     return function (e) {     // 这是真正的事件处理函数
        //         console.log(888);
        //     }
        // }


    </script>

</body>

</html>